<template>
  <el-row id="app" justify="center">
    <el-col :span="2">
      <div class="grid-content ep-bg-purple">
        <a href="javascript:;" @click="tonews">公益新闻</a></div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <a href="javascript:;" @click="todonate">公益捐赠</a>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <a href="javascript:;" @click="toass()">个人求助</a>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <a href="javascript:;" @click="toPet">宠物领养</a>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <a href="javascript:;" @click="toVolunt"> 志愿活动</a>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-light">
        <a href="javascript:;" @click="toCanpanyAdd"> 公司招募</a>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple-left" v-if="user === null">
        <a href="javascript:;" @click="tologin">登陆</a>/<a href="javascript:;" @click="toregest">注册</a>
      </div>

      <el-dropdown v-if="user !== null" @visible-change="upOrDown = !upOrDown">
        <div class="el-dropdown-link">
          <img :src="user.uimg" class="uavate"/>
          <el-icon class="el-icon--right">
            <arrow-down v-if="upOrDown"/>
            <arrow-up v-if="!upOrDown"/>
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toUserInfo">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
  <!-- <div class="login">
      <span @click="login"></span>
   </div>-->

</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "FrontNav",
  props: ["nuser"],
  loc: '',
  data() {
    return {
      user: {},
      upOrDown: true,
    }
  },
  watch: {
    nuser(newVal) {
      this.user = newVal
    }
  },
  methods: {
    tonews() {
      this.$router.push("/front/frontList")
    },
    todonate() {
      this.$router.push("/front/donate/DonateMoney")
    },
    toass() {
      this.$router.push("/front/assindex/asstanceList")
    },
    toregest() {
      this.$router.push("/regest")
    },
    tologin() {
      this.$router.push("/login")
    },
    toPet() {
      this.$router.push("/front/petList")
    },
    toVolunt() {
      this.$router.push("/front/volunteerList")
    },
    toUserInfo() {
      this.$router.push("/front/userInfo/userIndex")
    },
    toCanpanyAdd() {
      this.$router.push("/front/canpanyAdd")
    },
    logout() {
      this.user = null
      localStorage.removeItem("token")
      localStorage.removeItem("user")
      ElMessage({
        message: '退出成功',
        type: 'success',
      })
        this.$router.push("/front/frontList")

    },
    userReload() {
      this.user = JSON.parse(localStorage.getItem("user"))

    }
  },
  mounted() {
    this.userReload()
  },
  onActivated() {
    this.userReload()
  }
}
</script>

<style scoped>
#app {
  margin: 0 10px;
}

a {
  text-decoration: none;
  color: #2c3e50;
}

.el-row {
  /* margin-top: 30px;*/

}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  line-height: 50px;

}

.uavate {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>